import { WeaTableNew, WeaSwitch } from 'comsMobx';

let WeaTable = WeaTableNew.WeaTable;
import { Form, Button, Spin } from 'antd';
import {
  WeaDialog,
  WeaSearchGroup,
  WeaTab,
  WeaFormItem,
  WeaAlertPage,
  WeaNewScroll,
  WeaLocaleProvider,
  WeaMoreButton,
} from 'ecCom';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import CoworkConstant from '../../../util/CoworkConstant';

const getLabel = WeaLocaleProvider.getLabel;

@inject('coworkMainStore')
@observer
class LogDialog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: getLabel(17480, '查看日志'),
      closable: true,
      maskClosable: true,
      icon: 'icon-coms-cowork',
      showSearchAd: false,
      dialogStyle: {
        width: 800,
        height: 500,
      },
      height: 510,
    };
  }

  componentWillReceiveProps(nextProps) {
    let visible = nextProps.visible;
    if (visible && visible != this.props.visible) {
      const { id } = nextProps.coworkMainStore.content;
      nextProps.coworkMainStore.getLog({ coworkId: id, currentpage: '1' });
      nextProps.coworkMainStore.getLogViewCondition();
    }
  }

  render() {
    const { coworkMainStore, visible } = this.props,
      { logTableStore } = coworkMainStore;
    let buttons = [
      <Button
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_Button@9m8wr6@return`}
        onClick={this.back}
        type="primary"
      >
        {getLabel(1290, '返回')}
      </Button>,
      <Button
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_Button@uht194@export`}
        type="primary"
        disabled={false}
        onClick={this.exportExcel}
      >
        {getLabel(28343, '导出Excel')}
      </Button>,
      <WeaMoreButton
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_WeaMoreButton@xirtot@more`}
      />,
    ];
    const { sessionkey, viewRight, logLoading } = coworkMainStore.logList;
    const { title, closable, maskClosable, dialogStyle, height } = this.state;
    return (
      <div>
        <WeaDialog
          ecId={`${
            (this && this.props && this.props.ecId) || ''
          }_WeaDialog@ubx7cf`}
          title={title}
          visible={visible}
          buttons={buttons}
          closable={closable}
          maskClosable={maskClosable}
          icon={CoworkConstant.iconClassName}
          iconBgcolor={CoworkConstant.iconBgColor}
          onCancel={this.back}
          style={dialogStyle}
          onChangeHeight={this.changeHeight}
          // hasScroll
        >
          <Spin
            ecId={`${
              (this && this.props && this.props.ecId) || ''
            }_Spin@swmsai`}
            spinning={logLoading}
          >
            {viewRight && viewRight == 1 ? (
              [
                <WeaTab
                  ecId={`${
                    (this && this.props && this.props.ecId) || ''
                  }_WeaTab@tfgme9@tab`}
                  searchType={['advanced']}
                  onSearch={this.baseSearch}
                  showSearchAd={this.state.showSearchAd}
                  searchsAd={
                    <Form
                      ecId={`${
                        (this && this.props && this.props.ecId) || ''
                      }_Form@xwy2og@tabform`}
                      horizontal
                    >
                      {this.getSearchs()}
                    </Form>
                  }
                  setShowSearchAd={this.setShowSearchAd}
                  buttonsAd={this.getTabButtonsAd()}
                />,
                visible && (
                  <WeaNewScroll
                    ecId={`${
                      (this && this.props && this.props.ecId) || ''
                    }_WeaNewScroll@00pzhc@tablesacroll`}
                    style={{ maxHeight: 510 }}
                  >
                    <WeaTable
                      ecId={`${
                        (this && this.props && this.props.ecId) || ''
                      }_WeaTable@18ucyd@logtable`}
                      sessionkey={sessionkey}
                      comsWeaTableStore={logTableStore}
                      scroll={{ y: height - 125 }}
                    />
                  </WeaNewScroll>
                ),
              ]
            ) : !logLoading && !viewRight ? (
              <WeaAlertPage
                ecId={`${
                  (this && this.props && this.props.ecId) || ''
                }_WeaAlertPage@nm9jxk`}
              >
                <div>{getLabel(382663, '暂无权限')}</div>
              </WeaAlertPage>
            ) : null}
          </Spin>
        </WeaDialog>
      </div>
    );
  }

  setShowSearchAd = (bool) => {
    this.setState({ showSearchAd: bool });
  };

  // 高级搜索group定义
  getSearchs() {
    const { coworkMainStore } = this.props;
    const { logViewCondition } = toJS(coworkMainStore.content);
    const { logTableForm } = coworkMainStore;
    let group = [];
    logViewCondition &&
      logViewCondition.length > 0 &&
      logViewCondition.map((c) => {
        let items = [];
        c.items.map((fields) => {
          items.push({
            com: (
              <WeaFormItem
                ecId={`${
                  (this && this.props && this.props.ecId) || ''
                }_WeaFormItem@sgl1dl@${fields.domkey[0]}`}
                label={`${fields.label}`}
                labelCol={{ span: `${fields.labelcol}` }}
                wrapperCol={{ span: `${fields.fieldcol}` }}
              >
                {/* { WeaTools.getComponent(fields.conditionType, fields.browserConditionParam, fields.domkey, this.props, fields) } */}
                <WeaSwitch
                  ecId={`${
                    (this && this.props && this.props.ecId) || ''
                  }_WeaSwitch@3n20y5@${fields.domkey[0]}`}
                  fieldConfig={fields}
                  form={logTableForm}
                />
              </WeaFormItem>
            ),
            colSpan: 1,
          });
        });
        group.push(
          <WeaSearchGroup
            ecId={`${
              (this && this.props && this.props.ecId) || ''
            }_WeaSearchGroup@n0vdm4@searchgroup`}
            needTigger={true}
            title={c.title}
            showGroup={c.defaultshow}
            items={items}
          />,
        );
      });
    return group;
  }

  // 定义tab中点击高级搜索时的最下面的操作按钮集合
  getTabButtonsAd() {
    return [
      <Button
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_Button@6cccoh@search`}
        type="primary"
        onClick={this.search}
      >
        {getLabel(197, '搜索')}
      </Button>,
      <Button
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_Button@8kntb2@reset`}
        type="ghost"
        onClick={this.resetSearch}
      >
        {getLabel(2022, '重置')}
      </Button>,
      <Button
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_Button@eebzhm@cancel`}
        type="ghost"
        onClick={this.cancelSearch}
      >
        {getLabel(201, '取消')}
      </Button>,
    ];
  }

  // 获取高级搜索条件
  search = (e) => {
    e.preventDefault();
    const { coworkMainStore } = this.props;
    let { id } = coworkMainStore.content;
    coworkMainStore.getLog({ coworkId: id, currentpage: '1' });
    this.setState({
      showSearchAd: false,
    });
  };

  // 取消高级搜索
  cancelSearch = () => {
    // const {coworkMainStore} = this.props;
    //  coworkMainStore.clearFormFields();
    this.setState({
      showSearchAd: false,
    });
  };

  resetSearch = () => {
    const { coworkMainStore } = this.props;
    coworkMainStore.clearFormFields();
  };

  back = () => {
    this.props.showLogDialog(false);
    this.cancelSearch();
    const { coworkMainStore } = this.props;
    coworkMainStore.clearFormFields();
    this.props.coworkMainStore.clearLogViewCondition();
    this.props.coworkMainStore.logTableStore.tableUpdate('init', { data: [] });
    this.props.coworkMainStore.reSetLogStore();
  };

  changeHeight = (height) => {
    this.setState({ height });
  };

  exportExcel = () => {
    const { coworkMainStore } = this.props;
    let { id } = coworkMainStore.content;
    coworkMainStore.coworkLogExport({ coworkId: id });
  };
}

// 表单数据绑定
/* eslint-disable */
export default LogDialog = Form.create()(LogDialog);
/* eslint-enable */
